<template>
  <div class="view-user">
    <div class="pane">
      <!-- 组织架构 -->
      <div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
        <dept-tree @row-click="onDeptRowClick" />
      </div>

      <!-- 成员列表 -->
      <div class="user">
        <div class="user__header">
          <span>机构信息</span>
        </div>
				<el-card>
					<div class="user__header">
						<span>机构信息</span>
					</div>
					<el-descriptions border :column="1">
						<el-descriptions-item label="保险单号" width="100px">{{selects.dept.baoxian}}</el-descriptions-item>
						<el-descriptions-item label="描述">{{selects.dept.desc}}</el-descriptions-item>
						<el-descriptions-item label="备注">{{selects.dept.remark}}</el-descriptions-item>
					</el-descriptions>
			  </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { useCool } from "/@/cool";
import { useBase } from "/$/base";
import DeptTree from "./components/dept-tree2.vue";
const { service } = useCool();
const { app } = useBase();

const DeptMove = ref<any>();

// 是否展开
const isExpand = ref<boolean>(true);

// 选择项
const selects = reactive<any>({
	dept: {},
	ids: []
});

// 多选监听
function onSelectionChange(selection: any[]) {
	selects.ids = selection.map((e) => e.id);
}

// 部门选择监听
function onDeptRowClick({ item, ids }: any) {
	selects.dept = item;
}

// 是否显示部门
function deptExpand() {
	isExpand.value = !isExpand.value;
}

// 监听屏幕大小变化
watch(
	() => app.browser.isMini,
	(val: boolean) => {
		isExpand.value = !val;
	},
	{
		immediate: true
	}
);
</script>

<style lang="scss" scoped>
.view-user {
	.pane {
		display: flex;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.dept {
		height: 100%;
		width: 275px;
		max-width: calc(100% - 50px);
		background-color: #fff;
		transition: width 0.3s;
		margin-right: 10px;
		flex-shrink: 0;

		&._collapse {
			margin-right: 0;
			width: 0;
		}
	}

	.user {
		width: calc(100% - 310px);
		flex: 1;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			position: relative;
			background-color: #fff;

			span {
				font-size: 18px;
				white-space: nowrap;
				overflow: hidden;
			}

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 18px;
				cursor: pointer;
				background-color: #fff;
				height: 40px;
				width: 80px;
				padding-left: 10px;
			}
		}
	}

	.dept,
	.user {
		overflow: hidden;
		&__container {
			height: calc(100% - 40px);
		}
	}

	@media only screen and (max-width: 768px) {
		.dept {
			width: calc(100% - 100px);
		}
	}
}
</style>
